<style media="screen">
  .business-config-container {
    padding: 24px 40px;
    overflow: hidden;
  }

  .type-container {
    float: left;
    width: 280px;
  }

  .business-config-wrap {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    height: 420px;
    overflow-y: scroll;
  }

  .business-config-wrap::-webkit-scrollbar {
    width: 0;
  }

  .type-container p {
    height: 30px;
    line-height: 30px;
  }

  .business-config-wrap li {
    padding: 0 8px;
    height: 46px;
    line-height: 46px;
    overflow: hidden;
  }

  .business-config-wrap .add {
    height: 46px;
    line-height: 46px;
    overflow: hidden;
  }

  .business-config-wrap li .name {
    height: 46px;
    width: 210px;
    float: left;
  }

  .business-config-wrap li .show-state.active {
    display: none;
  }

  .business-config-wrap li.selected {
    background-color: #f9f9f9;
  }

  .business-config-wrap li .type-ipt,
  .business-config-wrap li .name-ipt {
    width: 210px;
    float: left;
    margin-top: 6px;
  }

  .business-config-wrap li .edit-state {
    display: none;
  }

  .business-config-wrap li .edit-state.active {
    display: block;
  }

  .business-config-wrap li .icon {
    padding-top: 17px;
    width: 18px;
    float: left;
    cursor: pointer;
    /* display: none; */
  }

  .business-config-wrap li:hover {
    background-color: #f9f9f9;
  }

  .business-config-wrap li:hover .icon {
    display: block;
  }

  .business-config-wrap .add {
    padding: 8px;
  }

  .business-config-wrap .add .name-ipt {
    width: 210px;
    float: left;
  }

  .business-config-wrap .add .icon {
    padding-top: 10px;
    width: 18px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
  }

  .arrow-container {
    width: 204px;
    min-height: 504px;
    float: left;
    position: relative;
  }

  .business-config-container .arrow-container .icon {
    color: #5e67a5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    font-size: 24px;
  }
</style>

<section id="business-config">
  <div class="mlr-24">
    <div class="clearfix border-b ptb-10">
      <span class="pull-left line-height-34">系统配置-招商配置-招商渠道</span>
    </div>
  </div>

  <section class="business-config-container">
    <div class="type-container">
      <p>渠道分类</p>
      <ul class="business-config-wrap">
        <li v-for="(item,index) in channelTypeList"  @click.stop="selectChannelType(item.dictName,item.dictCode,index,item.configType,item.defaultFlag)"  :class="{'selected':item.isSelect == 'Y'}">
          <div class="show-state" :class="{'active':item.isEdit == 'Y'}">
            <div class="name">{{item.dictName}}</div>
            <hl-switch :active="item.status == 'Y'?true:false" @switchactive="switchActive($event,'zj')" style="float: right; margin-top: 15px;" v-if="!index"></hl-switch> 
            <span class="icon-Gm-edit icon" @click.stop="editChannelType(index)" v-if="index"></span>
            <span style="margin-left:8px;" class="icon-Gm-delete icon text-right"  @click.stop="delChannelType(item.dictCode,index)" v-if="index"></span>
          </div>

          <div class="edit-state" :class="{'active':item.isEdit == 'Y'}">
            <input type="text" class="type-ipt form-control" v-model="item.dictName"  @blur="confirmEditChannelType(item.dictName,item.dictCode,index)">
            <span style="margin-left:20px;" class="icon-Gm-cancel icon"  @click.stop="cancelEditChannelType(index)"></span>
          </div>
        </li>
        <!-- 新增 -->
        <div class="add" v-show="isShowChannelTypeIpt" @blur="hideChannelTypeIpt">
          <input type="text" autofocus="autofocus" class="form-control name-ipt" v-model="addTypeValue"  @blur="confirmAddChannelType" v-focus>
          <span class="icon-Gm-cancel icon" @click="cancelAddChannelType"></span>
        </div>
      </ul>
      <hl-button size="mini" @on-click="addType" class="mtb-10">新增分类</hl-button>
    </div>

    <div class="arrow-container">
      <span class="icon-turn-right icon"></span>
    </div>

    <div class="type-container">
      <p>渠道名称</p>
      <ul class="business-config-wrap">
        <li v-for="(item,index) in channelNameList">
          <div class="show-state" :class="{'active':item.isEdit == 'Y'}">
            <div class="name">{{item.dictName}}</div>
            <span class="icon-Gm-edit icon" @click.stop="editChannelName(index,item,'edit')"></span>
            <span style="margin-left:8px;" class="icon-Gm-delete icon text-right"  @click.stop="delChannelName(item.dictCode,index)"></span>
          </div>

          <div class="edit-state" :class="{'active':item.isEdit == 'Y'}">
            <input type="text" class="name-ipt form-control" v-model="item.dictName"  @blur="confirmEditChannelName(item.dictName,item.dictCode,index)">
            <span style="margin-left:20px;" class="icon-Gm-cancel icon" @click="cancelEditChannelName(index)"></span>
          </div>

        </li>
        <!-- 新增 -->
        <div class="add" v-if="isShowChannelNameIpt" @blur="hideChannelNameIpt">
          <input type="text" autofocus="autofocus" class="form-control name-ipt" v-model="addNameValue"  @blur="confirmAddChannelName" v-focus>
          <span class="icon-Gm-cancel icon" @click="cancelAddChannelName"></span>
        </div>
      </ul>
      <hl-button size="mini" @on-click="addChannel('add')" class="mtb-10">新增渠道</hl-button>
    </div>
  </section>

  <section class="commission-config" v-if="channelTypeList.length && channelTypeList[0].status == 'Y'">
    <span>是否在合同中体现中介佣金：</span> 
    <hl-switch :active="commissionObj.status == 'Y'?true:false" @switchactive="switchActive($event,'yj')"></hl-switch>
  </section>

  <hl-dialog :visible="addEditDefaultFlag" :title="addEditDefaultType == 'add'? '新增渠道名称':'编辑渠道名称'" @on-close="closePop">
    <div class="pl-24 pr-24 content-pop content-24">
      <div class="content-item">
        <div class="title"><span class="required">*</span>渠道名称：</div>
        <input type="text" class="name-ipt form-control" style="width: 200px;" v-model="channelItem.dictName">
      </div>
      <div class="content-item">
        <div class="title"><span class="required">*</span>中介类型：</div>
        <hl-radio :data="typeList" v-model="channelItem.intermediaryType"></hl-radio>
      </div>
      <div class="content-item">
        <div class="title"><span class="required">*</span>转介人：</div>
        <input type="text" class="name-ipt form-control" style="width: 200px;" v-model="channelItem.intermediaryName">
      </div>
      <div class="content-item">
        <div class="title"><span class="required">*</span>联系方式：</div>
        <input type="text" class="name-ipt form-control" style="width: 200px;" v-model="channelItem.intermediaryPhone">
      </div>
      <div class="content-item">
        <div class="title"><span class="required">*</span>通讯地址：</div>
        <input type="text" class="name-ipt form-control" style="width: 200px;" v-model="channelItem.intermediaryAddress">
      </div>
      <div class="content-item" v-if="channelItem.intermediaryType + '' == 'P'">
        <div class="title"><span class="required">*</span>身份证号：</div>
        <input type="text" class="name-ipt form-control" style="width: 200px;" v-model="channelItem.intermediaryIdCode">
      </div>
    </div>
    <div slot="footer">
      <hl-button type="primary" @on-click="confirmSubmit">确定</hl-button>
      <hl-button type="outline" @on-click="closePop">取消</hl-button>
    </div>
  </hl-dialog>


</section>

<script src="modules/system_config/scripts/business_config.js" charset="utf-8"></script>
<style>
  .commission-config {
    margin: 0 40px 20px;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
  }

  .commission-config>div {
    display: flex;
    align-items: center;
  }

  .content-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .content-item .title {
    width: 85px;
  }
</style>